<template>
  <div class="flex flex-direction-column padding-tb-10 padding-lr-10 header-box">
    <div class="flex align-items-center justify-content-space-between">
      <div class="header-box-left flex align-items-center">
        <div class="cursor-pointer" @click="openClick" style="transform: translateY(2px);cursor: pointer;">
          <el-icon :size="24">
            <Fold v-if="isCollapse" />
            <Expand v-if="!isCollapse" />
          </el-icon>
        </div>
        <div class="margin-l-16">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.name">{{
              item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="header-box-right">
        <div style="display: flex;align-items: center;">
          <div class="test-clock-container">
            <zt-rolling-clock />
          </div>
          <div style="font-size: 14px;margin-top: -2px;margin-right: 5px;">
            <span>{{ timeTip }}</span>
            <span style="color: #333;margin-left: 5px;">{{ store.accountObjItem.userName }}</span>
          </div>
        </div>
        <el-dropdown>
          <div class="header-box-right-dropdown">
            <el-avatar :style="{ backgroundColor: '#f56a00', verticalAlign: 'middle', cursor: 'pointer' }">
              {{ store.accountObjItem.userName?.substring(0, 1) || '暂无' }}
            </el-avatar>
            <!-- <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> -->
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>基本设置</el-dropdown-item>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click="menuClick('out')" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from '@/store/index.js'//引入store
import { storeToRefs, mapState } from 'pinia';//实现仓库数据双向绑定
import { toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import ztRollingClock from '@/components/zt-rolling-clock/index.vue'
const router = useRouter();
const store = useStore();

const isCollapse = ref(false) //控制收起展开

// 计算属性
const breadcrumbList = computed(() => {
  return store.titleList
})

// 根据当前时间提示早上好 晚上好 下午好 中午好 凌晨好
const timeTip = computed(() => {
  const hour = new Date().getHours();
  let greeting = '';
  if (hour >= 0 && hour < 6) {
    greeting = '凌晨好 !';
  } else if (hour >= 6 && hour < 12) {
    greeting = '早上好 !';
  } else if (hour >= 12 && hour < 14) {
    greeting = '中午好 !';
  } else if (hour >= 14 && hour < 18) {
    greeting = '下午好 !';
  } else {
    greeting = '晚上好 !';
  }
  return greeting;
})

// 收起/展开按钮
async function openClick() {
  isCollapse.value = !store.isCollapse
  store.openClose(isCollapse.value)
}

// 菜单按钮
async function menuClick(type) {
  switch (type) {
    case 'out'://退出
      ElMessageBox.confirm('你是否确认退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.setToken('')
        setTimeout(() => {
          router.replace(store.loginPath)
          store.clearStore() //调用清空pinia数据方法
          ElMessage.success('退出成功!');
        }, 500);
      })
      break;
  }
}

// 获取面包屑标题   //这个获取的是  路由的结构
async function caleBreadcrumb() {
  const temp = []
  router.matched.forEach((item) => {
    if (item.meta.title && item.path) {
      temp.push({ path: item.path, title: item.meta.title })
    }
  })
  // this.breadcrumbList = temp  // this.breadcrumbList --> data声明的变量
  let list = toRaw(store.menuList)
}

onMounted(() => {
  // 窗口大小改变  控制菜单栏收起与展开
  window.onresize = function () {
    if (window.innerWidth > 1024) {
      store.isCollapse = false
    } else {
      store.isCollapse = true
    }
  }
})


</script>

<style lang='scss' scoped>
.header-box {
  box-shadow: 0 1px 4px #00152914;

  .header-box-left {}

  .header-box-right {
    display: flex;
    align-items: center;

    .header-box-right-dropdown {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>